<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<html>
<head>
    <title>组织信息管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
        }

        .container {
            padding: 20px;
        }

        .table-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-top: 20px;
            overflow-x: auto;
        }

        .table {
            width: 100%;
            table-layout: fixed;
            margin-bottom: 0;
        }

        .table th, .table td {
            padding: 12px 8px;
            vertical-align: middle;
            text-align: center;
            word-wrap: break-word;
        }

        .table th {
            background-color: #f8f9fa;
            font-weight: 600;
            white-space: nowrap;
        }

        /* 列宽分配 */
        .table th:nth-child(1), .table td:nth-child(1) { width: 5%; }  /* ID */
        .table th:nth-child(2), .table td:nth-child(2) { width: 5%; }  /* 用户ID */
        .table th:nth-child(3), .table td:nth-child(3) { width: 8%; }  /* Logo */
        .table th:nth-child(4), .table td:nth-child(4) { width: 10%; } /* 组织名称 */
        .table th:nth-child(5), .table td:nth-child(5) { width: 8%; }  /* 组织类型 */
        .table th:nth-child(6), .table td:nth-child(6) { width: 10%; } /* 联系电话 */
        .table th:nth-child(7), .table td:nth-child(7) { width: 15%; } /* 地址 */
        .table th:nth-child(8), .table td:nth-child(8) { width: 20%; } /* 描述 */
        .table th:nth-child(9), .table td:nth-child(9) { width: 12%; } /* 操作 */

        .logo-img {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            object-fit: cover;
            margin: 0 auto;
            display: block;
        }

        .no-logo {
            color: #6c757d;
            font-style: italic;
        }

        .action-btns {
            display: flex;
            justify-content: center;
            gap: 6px;
        }

        .action-btn {
            padding: 5px 10px;
            font-size: 0.85rem;
        }

        .add-btn {
            padding: 8px 16px;
            font-weight: 500;
        }

        @media (max-width: 1200px) {
            .table th, .table td {
                padding: 8px 5px;
                font-size: 0.9rem;
            }

            .action-btns {
                flex-direction: column;
                gap: 4px;
            }

            .action-btn {
                width: 100%;
            }
        }
    </style>
</head>
<body class="bg-light">
<div class="container">
    <%@include file="top.jsp"%>

    <div class="d-flex justify-content-between align-items-center mb-4">

        <form action="${pageContext.request.contextPath}/organization/search" method="get" class="row g-3 align-items-center">
            <div class="col-auto">
                <input type="text" name="org_name" class="form-control form-control-sm"
                       placeholder="组织名称搜索" value="${param.org_name}">
            </div>
            <div class="col-auto">
                <select name="org_type" class="form-select form-select-sm">
                    <option value="">组织类型</option>
                    <option value="公益组织" ${param.org_type == '公益组织' ? 'selected' : ''}>公益组织</option>
                    <option value="企业" ${param.org_type == '企业' ? 'selected' : ''}>企业</option>
                    <option value="学校" ${param.org_type == '学校' ? 'selected' : ''}>学校</option>
                    <option value="政府机构" ${param.org_type == '政府机构' ? 'selected' : ''}>政府机构</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-search"></i> 搜索
                </button>
                <a href="${pageContext.request.contextPath}/organization/list" class="btn btn-outline-secondary btn-sm ms-2">
                    <i class="bi bi-arrow-counterclockwise"></i> 重置
                </a>
            </div>
        </form>

        <a href="${pageContext.request.contextPath}/organization/add" class="btn btn-primary add-btn">
            <i class="bi bi-plus-circle me-1"></i> 添加组织
        </a>
    </div>

    <div class="table-container">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户ID</th>
                <th>Logo</th>
                <th>组织名称</th>
                <th>组织类型</th>
                <th>联系电话</th>
                <th>地址</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${organization}" var="org">
                <tr>
                    <td>${org.orgid}</td>
                    <td>${org.users.userid}</td>
                    <td>
                        <c:choose>
                            <c:when test="${not empty org.logo}">
                                <img class="logo-img" src="${org.logo}" alt="组织Logo">
                            </c:when>
                            <c:otherwise>
                                <div class="no-logo">无</div>
                            </c:otherwise>
                        </c:choose>
                    </td>
                    <td>${org.org_name}</td>
                    <td>${org.org_type}</td>
                    <td>${org.contact_phone}</td>
                    <td>${org.address}</td>
                    <td>${org.description}</td>
                    <td>
                        <div class="action-btns">
                            <a href="${pageContext.request.contextPath}/organization/edit/${org.orgid}"
                               class="btn btn-sm btn-warning action-btn">
                                <i class="bi bi-pencil"></i> 编辑
                            </a>
                            <a href="${pageContext.request.contextPath}/organization/delete/${org.orgid}"
                               class="btn btn-sm btn-danger action-btn"
                               onclick="return confirm('确定删除吗？')">
                                <i class="bi bi-trash"></i> 删除
                            </a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>